<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <title>商品页</title>
  <style>
  </style>
  <link rel="stylesheet" type="text/css" th:href="@{/static/layui-v2.6.13/layui/css/layui.css}"/>
  <script type="text/javascript" th:src="@{/static/js/jquery-1.9.1.min.js}"></script>
  <script type="text/javascript" th:src="@{/static/layui-v2.6.13/layui/layui.js}"></script>
</head>
<body>
<div align="center">
  <form class="layui-form">
    <div class="layui-form-item">
    <input type="hidden" th:value="${session.username}" id="phone" name="phone"/>
    <input type="hidden" th:value="${session.userid}" name="uId"/>
    <input type="hidden" th:value="${good.id}" name="id"/>
    <label class="layui-form-label"></label>
    </div>
    <div style="width: 100%;" class="layui-form-item">
      <img th:src="@{/static/img/{url}(url=${good.url})}" width="125px" height="125px"/>
    </div>
    <div class="layui-form-item">
      <div>
        <span th:text="${good.name}" id="name"></span>
        <span>￥</span>
        <span th:text="${good.price}" id="price"></span>
      </div>
      <input type="button"  class="layui-btn" onclick="sub()" value="-"/>
      <input type="number" class="layui-btn layui-btn-primary" min="1" th:max="${good.amount}" value=1 id="count" name="count"/>
      <input type="button" class="layui-btn" th:onclick="add([[${good.amount}]])" value="+"/>
    </div>
    <div class="layui-form-item">
      <button type="button" class="layui-btn" onclick="buy()">提交订单</button>
      <button type="button" class="layui-btn" onclick="addCart()">添加到购物车</button>
    </div>
  </form>
</div>
<script>
  layui.use('layer',function(){
    var layer = layui.layer;
  });
  function buy(){
    var params = $("form").serialize();
    var name = $("#name").text();
    var price = $("#price").text();
    $.ajax({
      url:'creorder',
      type:'post',
      data:params+'&name='+name+'&price='+price,
      success:function(obj){
        var index = parent.layer.getFrameIndex(window.name);
        parent.layer.close(index);
      }
    });
  }
  function addCart(){
    var params = $("form").serialize();
    var name = $("#name").text();
    var price = $("#price").text();
    $.ajax({
      url:'addCart',
      type:'post',
      data:params+'&name='+name+'&price='+price,
      success:function(obj){
        var index = parent.layer.getFrameIndex(window.name);
        parent.layer.close(index);
      }
    });
  }
  function sub(){
    var count = $("#count").val();
    if(count > 1)
    $("#count").val(count-1);
  }
  function add(max){
    var count = Number($("#count").val());
    if(count < max)
    $("#count").val(count+1);
  }
</script>
</body>
</html>